﻿@page "/components/icon"

<PageOutlet Url="components/icon"
            Title="Icon"
            Description="icon component of the bit BlazorUI components" />

<DemoPage Name="Icon"
          Description="An icon represents concept or meaning for the user. It's used to make better user experience (UX) and user-friendly applications."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          GitHubUrl="Utilities/Icon/BitIcon.razor"
          GitHubDemoUrl="Utilities/Icon/BitIconDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitIcon IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>Disabled</div><br />
        <BitIcon IconName="@BitIconName.Accept" IsEnabled="false" />
        &nbsp;
        <BitIcon IconName="@BitIconName.Bus" IsEnabled="false" />
        &nbsp;
        <BitIcon IconName="@BitIconName.Pinned" IsEnabled="false" />
    </DemoExample>

    <DemoExample Title="Variant" RazorCode="@example2RazorCode" Id="example2">
        <div>Fill</div><br />
        <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Fill" />
        <br /><br /><br /><br />
        <div>Outline</div><br />
        <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Outline" />
        <br /><br /><br /><br />
        <div>Text (default)</div><br />
        <BitIcon IconName="@BitIconName.Accept" Variant="BitVariant.Text" />
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example3RazorCode" Id="example3">
        <div>Small</div><br />
        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Size="BitSize.Small" IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>Medium</div><br />
        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Size="BitSize.Medium" IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>Large</div><br />
        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Size="BitSize.Large" IconName="@BitIconName.Pinned" />
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example4RazorCode" Id="example4">
        <div>Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.</div>
        <br /><br /><br />
        <div>Primary</div><br />
        <BitIcon Color="BitColor.Primary" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Color="BitColor.Primary" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Color="BitColor.Primary" IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>Secondary</div><br />
        <BitIcon Color="BitColor.Secondary" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Color="BitColor.Secondary" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Color="BitColor.Secondary" IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>Tertiary</div><br />
        <BitIcon Color="BitColor.Tertiary" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Color="BitColor.Tertiary" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Color="BitColor.Tertiary" IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>Info</div><br />
        <BitIcon Color="BitColor.Info" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Color="BitColor.Info" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Color="BitColor.Info" IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>Success</div><br />
        <BitIcon Color="BitColor.Success" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Color="BitColor.Success" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Color="BitColor.Success" IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>Warning</div><br />
        <BitIcon Color="BitColor.Warning" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Color="BitColor.Warning" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Color="BitColor.Warning" IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>SevereWarning</div><br />
        <BitIcon Color="BitColor.SevereWarning" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Color="BitColor.SevereWarning" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Color="BitColor.SevereWarning" IconName="@BitIconName.Pinned" />
        <br /><br /><br /><br />
        <div>Error</div><br />
        <BitIcon Color="BitColor.Error" IconName="@BitIconName.Accept" />
        &nbsp;
        <BitIcon Color="BitColor.Error" IconName="@BitIconName.Bus" />
        &nbsp;
        <BitIcon Color="BitColor.Error" IconName="@BitIconName.Pinned" />
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
        <div>
            <BitIcon IconName="@BitIconName.Accept" Size="BitSize.Large"
                     Style="background-color: brown; border-radius: 4px" />
            <BitIcon IconName="@BitIconName.Accept" Class="icon-class" />
        </div>
    </DemoExample>
</DemoPage>
